<template>
  <el-dialog :title="title" center :visible.sync="innerVisible" append-to-body :close-on-click-modal="false" width="80%" :before-close="handleCloseSelect">
    <el-form ref="formRef" :model="params" inline label-width="100px">
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="params.title" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="所属店铺" prop="shop_name">
        <el-input v-model="params.shop_name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()">查询</el-button>
        <el-button type="warning" @click="resetPamars()">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="multipleTableGoods" :data="list" style="width: 100%" :row-key="getRowKeys" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :selectable="selectable" :reserve-selection="true">
      </el-table-column>
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="{$index}">
          <div>
            {{ $index + (params.page - 1) * params.limit + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品图片">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.cover" target="_blank" title="查看最大化图片"><img :src="scope.row.cover"
                                                                            style="width: 300px;height: 300px"/></a>
            <img slot="reference" :src="scope.row.cover" @click="$openImg(scope.row.cover)"
                 style="width: 50px;height: 50px; cursor:pointer"/>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名称" prop="title"></el-table-column>
      <el-table-column align="center" label="所属店铺" prop="shop_name"></el-table-column>
      <el-table-column align="center" label="价格" prop="min_sale_price"></el-table-column>
      <el-table-column align="center" label="实际销量" prop="real_sale_num"></el-table-column>
      <el-table-column align="center" label="贡献值" prop="consumption_value"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <div>
            <el-button type="text" @click="look('goods', row.id)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="params.page"
                   :page-sizes="[3, 10, 20, 50]"
                   :page-size="params.limit" :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseSelect">取 消</el-button>
        <el-button type="primary" @click="submitSelect">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
  import seviceApi from '@/api/serviceApi.js'

  export default {
    name: 'select-goods-shop',
    props: {
      idList: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        title: '选择商品2',
        innerVisible: false,
        list: [],
        params: {
          page: 1,
          limit: 3,
          title: '',
          shop_name: '',
          mobile: ''
        },
        totalPage: 0,
        selectList: []
      }
    },
    created () {
      this.title = '选择商品'
    },
    methods: {
      open () {
        this.innerVisible = true
        this.getList()
      },
      getRowKeys (row) {
        return row.id
      },
      look (type, id) {
        this.$emit('lookGoodsOrShopDetail', { type, id })
      },
      // 获取列表数据
      getList () {
        seviceApi.getGoodsAllList({ ...this.params, verify_status: 1, added: 1 }).then(res => {
          if (res && res.data.code == 200) {
            this.list = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
        })
      },
      handleCloseSelect () {
        this.innerVisible = false
        this.$refs.formRef.resetFields()
        this.$refs.multipleTableGoods.clearSelection()
      },
      handleSelectionChange (val) {
        this.selectList = val
      },
      selectable (row, index) {
        if (this.idList.length > 0) {
          for (let id of this.idList) {
            if (id === row.id) {
              return false
            }
          }
        }
        return true
      },
      submitSelect () {
        if (this.selectList.length === 0) return this.$message.warning('请至少选择一项')
        this.$emit('selectGoods', this.selectList)
        this.handleCloseSelect()
      },
      // 每页数
      sizeChangeHandle (val) {
        this.params.limit = val
        this.getList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.params.page = val
        this.getList()
      },
      // 查询
      getDataList () {
        this.params.page = 1
        this.getList()
      },
      resetPamars () {
        this.$refs.formRef.resetFields()
        this.getDataList()
      }
    }
  }
</script>

<style lang="scss" scoped></style>
